<template>
  <div class="flex-1 px-4 flex justify-between">
    <div class="flex-1 flex">
      <form class="w-full flex md:ml-0" action="#" method="GET">
        <label for="search-field" class="sr-only">Search</label>
        <div class="relative w-full text-gray-400 focus-within:text-gray-600">
          <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
            <MagnifyingGlassIcon class="h-5 w-5" aria-hidden="true" />
          </div>
          <input id="search-field" class="block w-full h-full pl-8 pr-3 py-2 border-transparent text-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-0 focus:border-transparent sm:text-sm" placeholder="Search" type="search" name="search" />
        </div>
      </form>
    </div>
    <div class="ml-4 flex items-center md:ml-6">
      <button type="button" class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        <span class="sr-only">View notifications</span>
        <BellIcon class="h-6 w-6" aria-hidden="true" />
      </button>

      <!-- Profile dropdown -->
      <Menu as="div" class="ml-3 relative">
        <div>
          <MenuButton class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            <span class="sr-only">Open user menu</span>
            <img class="h-8 w-8 rounded-full" :src="default_avatar" alt="" />
          </MenuButton>
        </div>
        <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
          <MenuItems class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
            <MenuItem v-for="item in userNavigation" :key="item.name" v-slot="{ active }">
              <div :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700 cursor-pointer']" @click="item.callback">
                <BaseIcon
                  v-if="item.icon"
                  :name="item.icon"
                  class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 inline"
                  aria-hidden="true"
                />
                {{ $t(item.title) }}
              </div>
            </MenuItem>
          </MenuItems>
        </transition>
      </Menu>
    </div>
  </div>

</template>

<script setup>
import {
  Menu,
  MenuButton,
  MenuItem,
  MenuItems,
} from '@headlessui/vue'
import {
  BellIcon,
  MagnifyingGlassIcon
} from '@heroicons/vue/24/outline'

import default_avatar from "@/assets/default-avatar.jpg"
import { useRouter } from 'vue-router'
// 状态
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const userNavigation = [
  { title: 'general.profile', icon: 'UserIcon', callback: clickProfile },
  { title: 'general.logout', icon: 'ArrowRightOnRectangleIcon', callback: clickLogout },
]

function clickProfile() {
  console.log('fasfdsafa')
  router.push({name: 'account.settings'})
}

function clickLogout() {
  authStore.logout()
  router.push('/login')
  return false
}

</script>
